<template>
  <div class="problem">
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">
          <i class="el-icon-s-home"></i>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'mesage/idea' }">
          <i class="el-icon-s-comment"></i>
          信息管理
        </el-breadcrumb-item>
        <!-- 当前 -->
        <el-breadcrumb-item>用药问答</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-if="Hidd" class="content">
      <div class="header">
        <div>
          <el-input @input="search2" placeholder="请输入内容" v-model="input1" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </div>
        <div style="margin-left: 30px;">
          <el-date-picker @blur="aaa" style="position: relative;top: 50%;transform: translateY(-50%);" v-model="value1"
            type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div style="margin-left: 30px;">
          <el-button>确认</el-button>
        </div>
      </div>
      <div class="con-table">
        <el-table :data="list" style="width: 100%">
          <el-table-column align="center" prop="problem" label="问题" width="180">
          </el-table-column>
          <el-table-column align="center" prop="fankuser" label="提问用户" width="180">
          </el-table-column>
          <el-table-column align="center" :formatter='formatTime' prop="tjtime" label="提问时间">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template #default="scope">
              <div>
                <span style="margin-right: 10px;" @click="toDetail(scope.row)">查看问题详情</span>
                <span @click="toDetail2(scope.row)">写回答</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-if="!Hidd" class="detail">
      <div class="detail-con">
        <div>
          问题描述：{{ detail.problem }}
        </div>
        <div style="width: 50%;" v-if="state">
          用户回答： <el-table :data="typeof detail.huida == 'string' && detail.huida.constructor == String ? [] : detail.huida" border
            style="width: 100%">
            <el-table-column prop="user" align="center" label="用户">
            </el-table-column>
            <el-table-column prop="huida" align="center" label="回答内容">
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template #default="scope">
                <span @click="dele(scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="!state">
          问题回答： <el-input v-model="input2"></el-input>
        </div>
        <el-button type="primary" size="medium " @click="back" v-if="state">返回列表</el-button>
        <el-button type="primary" size="medium " @click="back2" v-if="!state">确认回答并返回列表</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getHuiDaDjm, putHuiDaDjm } from '../../utils/api'
import moment from 'moment'
export default {
  data() {
    return {
      input1: '',
      value1: '',
      list: [],
      Hidd: true,
      detail: {},
      state: true,
      input2: '',
      newA:[],
      statee:false
    }
  },
  created() {
    this.render()
  },
  methods: {
    back() {
      this.Hidd = !this.Hidd
    },
    back2() {
      this.detail.huida.push({ id: this.detail.huida.length != 0 ? this.detail.huida[this.detail.huida.length - 1].id + 1 : 1, user: '秀才', huida: this.input2 })
      this.detail.huida.map(item => {
        item.id = String(item.id)
      })
      this.detail.huida = JSON.stringify(this.detail.huida)
      putHuiDaDjm({ id: this.detail.id, huida: this.detail.huida }).then(res => {
        this.Hidd = !this.Hidd
        this.state = !this.state
        this.input2 = ''
        this.render()
      })
    },
    dele(items) {
      this.detail.huida = this.detail.huida.filter(item => {
        return item.id != items.id
      })
      this.detail.huida.map(item => {
        item.id = String(item.id)
      })
      this.detail.huida = JSON.stringify(this.detail.huida)
      putHuiDaDjm({ id: this.detail.id, huida: this.detail.huida }).then(res => {
        this.Hidd = !this.Hidd
        this.render()
      })
    },
    toDetail(item) {
      this.Hidd = !this.Hidd
      this.detail = item
    },
    toDetail2(item) {
      this.Hidd = !this.Hidd
      this.state = !this.state
      this.detail = item
    },
    formatTime(row, column) {
      let date = row[column.property];
      if (date === undefined) {
        return ''
      }
      return moment(date, moment.ISO_8601).format("YYYY-MM-DD")
    },
    render() {
      getHuiDaDjm().then(res => {
        this.list = res.data.data
        this.newA = [...this.list]
        this.list.map(item => {
          item.huida = JSON.parse(item.huida)
          item.huida.map(items => {
            items.id = Number(items.id)
          })
        })
      })
    },
    render2() {
      getHuiDaDjm().then(res => {
        this.list = res.data.data
      })
    },
    search() {
      this.list = this.newA.filter(item => {
        if (this.statee) {
          if (this.input1 != '') {
            if (item.fankuser.includes(this.input1) && Number(new Date(item.tjtime)) >= this.value1[0] && Number(new Date(item.tjtime)) <= this.value1[1]) {
              return item
            }
          } else {
            if (Number(new Date(item.tjtime)) >= this.value1[0] && Number(new Date(item.tjtime)) <= this.value1[1]) {
              return item
            }
          }
        } else {
          if (item.fankuser.includes(this.input1)) {
            return item
          }
        }
      })
    },
    search2() {
      if (this.input1 == '') {
        this.list = this.newA
      }
    },
    aaa() {
      if (this.value1 != '') {
        this.statee = true
        this.value1 = this.value1.map(item => {
          item = Number(item)
          return item
        })
      }
    }
  }
}
</script>
<style scoped>
.problem {
  width: 100%;
  overflow: hidden;
}

.content {
  width: 95%;
  margin: 20px auto;
}

.header {
  width: 100%;
  display: flex;
}

.con-table {
  width: 100%;
  margin-top: 20px;
}

.detail {
  width: 95%;
  margin: 20px auto;
}

.detail-con {
  width: 100%;

}
</style>